<template>
  <gui-page :custom-header="true">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">填志愿</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
      </view>
    </template>
    <!--  搜索  -->
    <template #gFixedTop>
      <view class="gui-dark-bg-level-1 gui-flex gui-row" style="margin-top: 20rpx">
        <gui-search
          class="gui-flex1"
          clear-btn
          :custom-class="['gui-bg-white', 'gui-margin-x']"
          :kwd="searchKey"
          placeholder="大学/专业"
          @confirm="confirm"
          @focus="searchPage"
          @inputting="inputting"
        />
        <view class="gui-padding-small gui-color-gray" style="margin-right: 15rpx">
          <text>重庆</text>
          <text class="gui-icons gui-form-icon">&#xe603;</text>
        </view>
        <view class="gui-padding-small gui-color-gray" style="width: 130rpx">
          <text>距离高考160天</text>
        </view>
      </view>
    </template>
    <template #gBody>
      <!-- 进度圆点修饰为激活进度点略宽的示例 -->
      <view style="margin-top: 120rpx">
        <gui-swiper :height="330" :indicator-active-width="38" :swiper-items="swiperItems" :width="750" />
      </view>
      <!--  智能匹配    -->
      <view class="gui-card-view gui-margin-top gui-bg-white gui-dark-bg-level-3 gui-border-radius-large gui-margin">
        <view class="gui-card-body gui-rows gui-nowrap gui-padding">
          <view class="gui-border-b">
            <view
              class="gui-relative gui-padding gui-flex gui-space-between"
              style="width: 100%; padding-bottom: unset"
              @tap.prevent="grade"
            >
              <template v-if="!gradeData">
                <text class="gui-button-text gui-color-gray">请填写你的模考/高考成绩</text>
                <text class="gui-button-text gui-icons gui-color-gray gui-text-right">&#xe69e;</text>
              </template>
              <template v-else>
                <text class="gui-button-text">{{ gradeData?.score }}分</text>
                <text class="gui-button-text gui-color-gray">
                  {{ gradeData?.text }}/{{ gradeData?.subject[0] }}/{{ gradeData?.subject[1] }}
                </text>
                <text class="gui-button-text gui-icons gui-color-gray gui-text-right">&#xe69e;</text>
              </template>
            </view>
          </view>
        </view>
        <view
          class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center gui-padding gui-justify-content-center"
        >
          <button
            class="gui-button gui-bg-primary gui-noborder gui-border-radius-full"
            style="width: 50%"
            type="default"
            @tap.stop="matching"
          >
            <text class="gui-icons gui-color-white gui-button-text">&#xe642; 智能匹配</text>
          </button>
        </view>
      </view>
      <!--  应用    -->
      <view class="gui-grid gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top">
        <view v-for="(item, index) in applyData" :key="index" class="gui-grid-item" @tap.prevent="onClick(item.path)">
          <view class="gui-icons gui-flex gui-grid-icon gui-justify-content-center gui-align-items-center">
            <gui-image :height="80" mode="aspectFit" :src="item.icon" :width="80" />
          </view>
          <text class="gui-grid-text gui-icons gui-color-gray">{{ item.name }}</text>
        </view>
      </view>
    </template>
    <!--    <template v-slot:gFooter>-->
    <!--      <tab-bar></tab-bar>-->
    <!--    </template>-->
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import GuiImage from '@/Grace6/components/gui-image.vue'

const img =
  'https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2MHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=90'
// 搜索
const searchKey = ref<string>('')

const swiperItems = ref<Array<any>>([
  {
    img: img,
    url: '',
    title: '测试标题 001',
    opentype: 'navigate',
  },
  {
    img: img,
    url: '',
    title: '测试标题 002',
    opentype: 'navigate',
  },
  {
    img: img,
    url: '',
    title: '测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
    opentype: 'navigate',
  },
])
const applyData = ref<Array<any>>([
  {
    name: '院校库',
    icon: '/static/menu_icon/college.svg',
    path: 'college/index',
    color: 'gui-color-green',
  },
  {
    name: '专业库',
    icon: '/static/menu_icon/subject.svg',
    path: 'subject/index',
    color: 'gui-color-green',
  },
  {
    name: '职业现状',
    icon: '/static/menu_icon/career.svg',
    path: 'career/index',
    color: 'gui-color-green',
  },
  {
    name: '录取数据',
    icon: '/static/menu_icon/enroll.svg',
    path: 'enroll/index',
    color: 'gui-color-green',
  },
  {
    name: '招生计划',
    icon: '/static/menu_icon/enrollPlan.svg',
    path: 'enrollPlan/index',
    color: 'gui-color-green',
  },
  {
    name: '一分一段',
    icon: '/static/menu_icon/subsection.svg',
    path: 'subsection/index',
    color: 'gui-color-green',
  },
  {
    name: '位次查询',
    icon: '/static/menu_icon/rank.svg',
    path: 'rank/index',
    color: 'gui-color-green',
  },
  {
    name: '批次线',
    icon: '/static/menu_icon/batch.svg',
    path: 'batch/index',
    color: 'gui-color-green',
  },
  {
    name: '智能诊断',
    icon: '/static/menu_icon/diagnosis.svg',
    path: 'diagnosis/index',
    color: 'gui-color-green',
  },
  {
    name: '选科助手',
    icon: '/static/menu_icon/SubjectSelectionAssistant.svg',
    path: 'SubjectSelectionAssistant/index',
    color: 'gui-color-green',
  },
])

const gradeData = ref<any>(null)
// 监听输入
const inputting = (e: any) => {
  console.log(e)
}
// 监听提交
const confirm = (e: any) => {
  console.log(e)
}

const onClick = (path?: string) => {
  uni.navigateTo({
    url: `../${path}`,
  })
}

// 成绩填写
const grade = () => {
  uni.navigateTo({
    url: '../grade/index',
  })
}
// 搜索
const searchPage = () => {
  uni.navigateTo({
    url: '../search/index',
  })
}
// 智能匹配
const matching = () => {
  if (gradeData.value === null) {
    uni.showToast({
      title: '请先填写成绩',
      icon: 'none',
    })
    return
  }
  uni.navigateTo({
    url: '../matching/index',
  })
}

onLoad(() => {
  uni.$on('grade', (res) => {
    console.log('来自grade页面的数据', res)
    gradeData.value = res
  })
  uni.$on('search', (res) => {
    console.log('来自search页面的数据', res)
    searchKey.value = res
  })
})
onUnload(() => {
  uni.$off('grade')
  uni.$off('search')
})
</script>
<style scoped>
/deep/.gui-grid-icon image {
  background: white !important;
}
</style>
